<template>
  <div class="layout">
    <div class="leftmenu">
      <MenuLeft
        :contentMenu="contentMenu"
        :systemMenu="systemMenu"
        :isShowMenu="isShowMenu"
      ></MenuLeft>
    </div>

    <div class="container">
      <HeaderManage></HeaderManage>
      <div class="right_main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderManage from "./HeaderManage";
import MenuLeft from "./MenuLeft";
export default {
  name: "manage",
  components: {
    HeaderManage,
    MenuLeft,
  },
  data() {
    return {
      screenWidth: null,
      isShowMenu: true,
      userinfo: {},
      contentMenu: [
        {
          title: "文章",
          icon: "iconfont icon-wenzhang",
          path: "/blog",
          name: "blog",
        },
        {
          title: "分类",
          icon: "iconfont icon-fenlei",
          path: "/class",
          name: "class",
        },
        {
          title: "评论",
          icon: "iconfont icon-pinglun",
          path: "/comment",
          name: "comment",
        },
        {
          title: "附件",
          icon: "iconfont icon-fujian",
          path: "/attachment",
          name: "attachment",
        },
      ],
      systemMenu: [
        {
          title: "用户",
          icon: "iconfont icon-yonghushezhi",
          path: "/usersadmin",
          name: "usersadmin",
        },
        {
          title: "设置",
          icon: "iconfont icon-shezhi",
          path: "/setting",
          name: "setting",
        },
      ],
    };
  },
  methods: {},
  watch: {
    screenWidth: {
      handler: function (val, oldVal) {
        if (val < 750) {
          this.isShowMenu = false;
        } else {
          this.isShowMenu = true;
        }
      },
      immediate: true,
    },
  },
  created() {
    //创建之前进行网页宽度监听
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
};
</script>

<style scoped lang="scss">
.layout {
  width: 100%;
  height: 100vh;
  user-select: none;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  .leftmenu {
    width: 220px;
    transition: all 0.5s ease-in-out;
  }
  .container {
    flex: 1;
    width: 100%;
    background: #eff4f9;
    overflow:scroll;
    .right_main {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      box-sizing: border-box;
      padding:15px;
    }
  }
}

@media screen and (max-width: 750px) {
  .layout {
    width: 100%;
    height: 100vh;
    user-select: none;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    .leftmenu {
      position: absolute;
      width: 0 !important;
      height: 30px;
      left: 0;
      bottom: 0;
      // background-color: #000;
    }
  }
}
</style>